<template>
  <l-layout class="l-tab-page">
    <l-panel>
      <template #title>
        <div>{{ $t("大数据列表") }}</div>
        <div style="width: 560px">
          <div class="ml-8" style="float: right">
            <l-tool-btns :hasAdd="false" />
          </div>
        </div>
      </template>
      <l-table
        ref="mainTable"
        :loading="tableLoading"
        :columns="columns"
        :dataSource="tableData"
      />
    </l-panel>
  </l-layout>
</template>

<script>
export default {
  data() {
    return {
      // 表格参数
      tableLoading: false,
      tableData: [],
      columns: [],
      strRow: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let columns = [];
      let row = {};
      for (let j = 0; j < 30; j++) {
        columns.push({
          label: `列${j - 0 + 1}`,
          prop: `columns${j - 0 + 1}`,
          width: 200,
        });
        row[`columns${j - 0 + 1}`] = "表数据";
      }
      this.columns = columns;
      this.loadData();
    },
    loadData() {
      this.tableLoading = true;
      setTimeout(async () => {
        let list = [];
        for (let i = 0; i < 100000; i++) {
          list.push({
            columns1: "表数据",
            columns2: "表数据",
            columns3: "表数据",
            columns4: "表数据",
            columns5: "表数据",
            columns6: "表数据",
            columns7: "表数据",
            columns8: "表数据",
            columns9: "表数据",
            columns10: "表数据",
            columns11: "表数据",
            columns12: "表数据",
            columns13: "表数据",
            columns14: "表数据",
            columns15: "表数据",
            columns16: "表数据",
            columns17: "表数据",
            columns18: "表数据",
            columns19: "表数据",
            columns20: "表数据",
            columns21: "表数据",
            columns22: "表数据",
            columns23: "表数据",
            columns24: "表数据",
            columns25: "表数据",
            columns26: "表数据",
            columns27: "表数据",
            columns28: "表数据",
            columns29: "表数据",
            columns30: "表数据",
          });
        }

        await this.$refs.mainTable.loadData(list);
        this.tableLoading = false;
      }, 100);
    },
  },
};
</script>
